<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<input type="text" placeholder="请输入关键字" v-model="keyword">
			<ul>
				<!-- 注意遍历的时候，一定遍历的是过滤出来的数据 -->
				<li v-for="p in persons2" :key="p.id">
					{{p.name}} - {{p.age}} -{{p.gender}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#demo',
			data:{
				keyword:'',
				persons:[ //源数据
					{id:'001',name:'马冬梅',age:19,gender:'女'},
					{id:'002',name:'周冬雨',age:20,gender:'女'},
					{id:'003',name:'周杰伦',age:21,gender:'男'},
					{id:'004',name:'帅邓伦',age:22,gender:'男'},
				],
				persons2:[] //过滤出来的数据
			},
			watch:{
				keyword:{
					immediate:true, //开启立即监视，目的是：初始化时呈现完整列表
					handler(value){
						//一个细节：'abc'是包含''的
						const fltPersons = this.persons.filter((personObj)=>{
							return personObj.name.indexOf(value) !== -1
						})
						//将过滤出来的新数据赋值给persons2
						this.persons2 = fltPersons
					}
				}
			}
		})
	</script>
</html>